<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>草稿2</title>
    <link rel="stylesheet" href="window.css">
    <style>
        *{
            padding: 0;
            margin: 0 auto;
        }
        .head{
            width: 80rem;
            height: 4rem;
            border: 0.1rem solid black;
            display: flex;
        }
        .head .person{
            width: 25%;
            height: 100%;
            border: 0.1rem solid blue;
            display: flex;
            align-items: center;
            background-color: aqua;
            .login,.register1{
                width: 30%;
                height: 60%;
                border: none;
            }
            .login:hover,.register1:hover{
                background-color: rgba(0,0,0,0.2);
            }
            .up,.botton{
                width: 100%;
                height: 50%;
            }
            .hello{
                font-size: 1.4rem;
            }
            img{
                width: 3rem;
                height: 3rem;
                border-radius: 50%;
            }
            .personalCenter,.exit{
               border: none;
               height: 60%;
               cursor: pointer;
            }
        }
        .head .nav{
            width: 75%;
            height: 100%;
            display: flex;
            position: relative;
            align-items: center;
            .categories{
                width: 8%;
                height: 80%;
                align-items: center;
                border: 0.1rem solid black;
                display: flex;
                margin-left: 1%;
                margin-right: 0;
                justify-content: center;
            }
            .create{
                position: absolute;
                right: 1%;
                width:12%;
            }
            .search{
                position: absolute;
                right: 15%;
                width: 20%;
                height: 40%;
                padding: 0 3%;
            }
        }
       
        .active{
            display: block;
        }
        /*所有要展示的部分全在main部分*/
        .main{
            width: 80rem;
            height: 40rem;
            margin-top: 2rem;
            border: solid black 0.1rem;
            display: flex;
            .left{
                width: 10%;
                height: 100%;
                border: 0.1rem solid black;
                margin-right: 2%;
                .system,.personpage,.good,.comment{
                    width: 100%;
                    height: 10%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    font-size: 1.4rem;
                    border-bottom: 0.1rem solid black;
                }
            }
            .center{
                width: 71%;
                height: 100%;
                overflow-y: scroll;
                border: 0.1rem solid blue;
                .article{
                    width: 90%;
                    height: 15%;
                    padding: 1% 2%;
                    border: 0.1rem solid black;
                    h1{
                        font-size: 1.4rem;
                    }
                    
                    /* .coverUrl{
                        width: 4rem;
                        height: auto;
                        position: absolute;
                        right: 2%;
                        top: 15%;
                    } */
                }
                .username,.password,.email,.startworkyear,.profession,
                .company,.position,.introduction{
                    margin-top: 2%;
                    width: 80%;
                    height: 6%;
                    border: 0.1rem solid black;
                    display: flex;
                    align-items: center;
                    span{
                        font-size: 1.3rem;
                    }
                    .a,.a1,.a2,.a3,.a4,.a5,.a6,.a7{
                        width:80%;
                        height: 80%;
                        background-color: rgba(0,0,0,0.2);
                        display: flex;
                        align-items: center;
                        padding-left: 5%;   
                    }
                    .a{
                        margin-left: 3%;
                    }
                    .a1,.a2,.a4,.a5,.a6{
                        margin-left: 6%;
                    }

                    /*控制输入框样式*/
                    .b{
                        width: 80%;
                        height: 80%;
                        padding-left: 5%;
                        padding-right: 5%;
                        margin-left: 2%;
                    }
                }
                .change{
                    margin-top: 3%;
                    width: 20%;
                    height: 8%;
                    margin-left: 40%;
                }
            }
            .right{
                margin-left: 2%;
                width: 15%;
                height: 100%;
                border: 0.1rem solid yellow;
                background-color: yellow;
                display: flex;
                flex-direction: column;
                img{
                    width: 6rem;
                    height: 6rem;
                    border-radius: 50%;
                    margin-top: 5%;
                }
                .submitavatar{
                    margin-top: 10%;
                    width: 60%;
                    height: 6%;
                }
            }
        }
    </style>
</head>
<body>
   <div class="head">
    <div class="nav">
        <input type="text" placeholder="请输入搜索内容" class="search">
        <button class="create">创作者中心</button>
    </div>
    <div class="person">
        <button class="login">登录</button>
        <button class="register1">注册</button>
    </div>
   </div>
   <div class="window"></div>
    <div class="main">
        <div class="left">
            
        </div>
        <div class="center">
        </div>
        <div class="right"></div>
    </div>
</body>
</html>


<script>
    //默认所传的页面都是
    //获取文章页面
    //1.获取文章分类
    const nav=document.querySelector('.head .nav')
    const center=document.querySelector('.main .center')
    let xhr3=new XMLHttpRequest()
    xhr3.open(
        'GET',
        'http://43.136.111.27:8086/article/categories'
    )
    xhr3.send()
    xhr3.onreadystatechange=function(){
        if(xhr3.readyState===4&&xhr3.status===200){
            let response=JSON.parse(xhr3.responseText)
            response.data.forEach(element => {
                const div=document.createElement('div')
                div.classList.add('categories')
                div.innerHTML=element
                nav.appendChild(div)
            });
        }
    }
    //2.获取Top文章内容(感觉没啥用，因为获取的top文章没有评论数，点赞数)
    let xhr1=new XMLHttpRequest()
    xhr1.open(
        'GET',
        'http://43.136.111.27:8086/article/top'
    )
    xhr1.send()
    xhr1.onreadystatechange=function(){
        if(xhr1.readyState===4&&xhr1.status===200){
            let response=JSON.parse(xhr1.responseText)
            console.log(response.data.records)
            response.data.records.forEach(item=>{
                const div2=document.createElement('div')
                div2.classList.add('article')
                div2.innerHTML=`
                    <h1>${item.title}</h1>
                    <p>${item.summary}</p>
                `
                div2.id=`${item.articleId}`
                console.log('我的id是:',`${item.articleId}`)
                center.appendChild(div2)
            })
        }
    }
    //获取文章的id已经成功
    center.addEventListener('click',function(event){
        if(event.target.closest('.article')){
            //获取文章id
            const articleId=event.target.closest('.article').id
            console.log('当前点击的文章id是:',articleId)
        }
    })
</script>
<!--我在更改了一条信息666888-->
<!--获取登录页面-->
<!--第二次更新-->
<script>
document.addEventListener('click',function(event){
    const window=document.querySelector('.window')
    const person=document.querySelector('.head .person')
    const center=document.querySelector('.main .center')
    const right=document.querySelector('.main .right')
    const left=document.querySelector('.main .left')
    const userdata={
            userId: 0,
            username: "string",
            password: "string",
            email: "string",
            mobile: "string",
            startWorkYear: 0,
            profession: "string",
            introduction: "string",
            company: "string",
            position: "string",
            interests: "string",
            avatar: "string"
    }
    const LoginSuccess='LoginSuccess'
    const LoginOut='LoginOut'
    //让登录弹窗出现(已完成)
    if(event.target.classList.contains('login')&&event.target.closest('.person')){
        window.classList.add('active')
        window.innerHTML=`
            <h1>登录页面</h1>
            <div class="email">
                <span>账号/邮箱:</span>
                <input type="text" placeholder="请输入邮箱" class="email1">
            </div>
            <div class="password">
                <span>密码:</span>
                <input type="text" placeholder="请输入密码" class="password1">
            </div>
            <button class="submit">登录</button>
            <button class="register">注册</button>
            <button class="close">x</button>
        `
    }
    //点击x让登录弹窗消失(已完成)
    if(event.target.classList.contains('close')&&event.target.closest('.window')){
        window.classList.remove('active')
    }
    if(event.target.classList.contains('close1')&&event.target.closest('.window')){
        window.classList.remove('active')
    }
    //处理登录页面来回切换逻辑(已完成)
    if(event.target.classList.contains('register1')&&event.target.closest('.head .person')){
        window.classList.add('active')
        window.innerHTML=`
            <h1>注册页面</h1>
            <div class="email2">
                <span>邮箱:</span>
                <input type="text" placeholder="请输入注册邮箱" class="email3">
            </div>
            <div class="username">
                <span>用户名:</span>
                <input type="text" placeholder="请输入注册用户名" class="username1">
            </div>
            <div class="password2">
                <span>密码:</span>
                <input type="text" placeholder="请输入注册密码" class="password3">
            </div>
            <button class="backLogin">返回登录</button>
            <button class="submitRegister">提交注册</button>
            <button class="close1">x</button>
        `
    }
    if(event.target.classList.contains('register')&&event.target.closest('.window')){
        window.innerHTML=`
            <h1>注册页面</h1>
            <div class="email2">
                <span>邮箱:</span>
                <input type="text" placeholder="请输入注册邮箱" class="email3">
            </div>
            <div class="username">
                <span>用户名:</span>
                <input type="text" placeholder="请输入注册用户名" class="username1">
            </div>
            <div class="password2">
                <span>密码:</span>
                <input type="text" placeholder="请输入注册密码" class="password3">
            </div>
            <button class="backLogin">返回登录</button>
            <button class="submitRegister">提交注册</button>
            <button class="close1">x</button>
        `
    }
    if(event.target.classList.contains('backLogin')&&event.target.closest('.window')){
        window.innerHTML=`
            <h1>登录页面</h1>
            <div class="email">
                <span>账号/邮箱:</span>
                <input type="text" placeholder="请输入邮箱" class="email1">
            </div>
            <div class="password">
                <span>密码:</span>
                <input type="text" placeholder="请输入密码" class="password1">
            </div>
            <button class="submit">登录</button>
            <button class="register">注册</button>
            <button class="close">x</button>
        `
    }
    

    //处理注册成功逻辑(已完成)
    if(event.target.classList.contains('submitRegister')&&event.target.closest('.window')){
        const email3=document.querySelector('.email3').value
        const username1=document.querySelector('.username1').value
        const password3=document.querySelector('.password3').value
        const data={
            email:email3,
            username:username1,
            password:password3
        }
        if(email3==''||username1==''||password3=='')
        alert('邮箱，用户名，密码不能为空')
        else{
            let xhr=new XMLHttpRequest()
            xhr.open(
                'POST',
                'http://43.136.111.27:8086/user/register'
            )
            xhr.setRequestHeader('Content-Type','application/json')
            xhr.send(JSON.stringify(data))
            xhr.onreadystatechange=function(){
                if(xhr.readyState===4&&xhr.status===200){
                    let response=JSON.parse(xhr.responseText)
                    if(response.code==200)
                    alert('注册成功')
                    window.classList.remove('active')
                }    
            }
        }
    }
    
    //处理登录成功逻辑(已完成)
    if(event.target.classList.contains('submit')&&event.target.closest('.window')){
        const email1=document.querySelector('.email1').value
        const password1=document.querySelector('.password1').value
        if(email1!=''&&password1!=''){
            let xhr=new XMLHttpRequest()
            xhr.open(
                'POST',
                `http://43.136.111.27:8086/user/login?email=${email1}&&password=${password1}`
            )
            xhr.send()
            xhr.onreadystatechange=function(){
                if(xhr.status==200&&xhr.readyState==4){
                  let response=JSON.parse(xhr.responseText)
                  console.log(response)
                  if(response.code=="200"){
                    alert('登录成功')
                    window.classList.remove('active')
                    //登录成功后发送登录成功事件，不想在一个if上写了
                    document.dispatchEvent(new CustomEvent(LoginSuccess,{
                        detail:response.data
                    }))
                  }
                  else{
                    alert('用户名或密码有误')
                  }
                }
            }
        }
        else{
            alert('邮箱和密码不能为空')
        }
    }

    //接受登录成功传递的参数
    document.addEventListener(LoginSuccess,function(event){
        let userkey=event.detail
        console.log("获取到的用户钥匙为:",userkey)
        //如果超出10个词得截断了
        //马上发送请求,获取到该用户的全部数据后就能开始渲染页面
        //渲染个人中心
        let xhr=new XMLHttpRequest()
        xhr.open(
            'GET',
            "http://43.136.111.27:8086/user/get/userinfo"
        )
        xhr.setRequestHeader('Authorization', `${userkey}`)
        xhr.send()
        xhr.onreadystatechange=function(){
            if(xhr.status===200&&xhr.readyState===4){
                let response=JSON.parse(xhr.responseText)
                //在这里就更新用户数据才行
                userdata.userId=response.data.userId
                userdata.username=response.data.username
                userdata.password=response.data.password
                userdata.email=response.data.email
                userdata.mobile=response.data.mobile
                userdata.startWorkYear=response.data.startWorkYear
                userdata.profession=response.data.profession
                userdata.introduction=response.data.introduction
                userdata.company=response.data.company
                userdata.position=response.data.position
                userdata.interests=response.data.interests
                userdata.avatar=response.data.avatar
                console.log("这是登录成功时的userdata:",userdata)
                let name=response.data.username
                if(name.length>4)
                name=name.substring(0,4)+"..."
                person.innerHTML=`
                    <img src="${userdata.avatar}" alt="" id="avatar2">
                    <span class="hello">${name}</span>
                    <button class="personalCenter">个人中心</button>
                    <button class="exit">退出登录</button>
                `    
            }
        }
        //获取点击个人中心的事件
        document.addEventListener('click',function(e){
            //渲染中间部分的个人中心已完成
            if(e.target.classList.contains('personalCenter')&&e.target.closest('.head .person')){
                center.innerHTML=`
                <h1>个人中心</h1>
                <div class="username">
                    <span>用户名:</span>
                    <div class="a">${userdata.username}</div>
                </div>
                <div class="password">
                    <span>密码:</span>
                    <div class="a1">${userdata.password}</div>
                </div>
                <div class="email">
                    <span>邮箱:</span>
                    <div class="a2">${userdata.email}</div>
                </div>
                <div class="startworkyear">
                    <span>开始工作:</span>
                    <div class="a3">${userdata.startWorkYear}</div>
                </div>
                <div class="profession">
                    <span>职业:</span>
                    <div class="a4">${userdata.profession}</div>
                </div>
                <div class="company">
                    <span>公司:</span>
                    <div class="a5">${userdata.company}</div>
                </div>
                <div class="position">
                    <span>方向:</span>
                    <div class="a6">${userdata.position}</div>
                </div>
                <div class="introduction">
                    <span>个人介绍:</span>
                    <div class="a7">${userdata.introduction}</div>
                </div>
                <button class="change">保存更改</button>
                `
                right.innerHTML=`
                    <img src="${userdata.avatar}" alt="" id="avatar">
                    <button class="submitavatar">上传头像</button>
                `
                left.innerHTML=`
                    <div class="system">系统通知</div>
                    <div class="personpage">个人主页</div>
                    <div class="comment">评论列表</div>
                    <div class="good">赞/收藏列表</div>
                `
            }
            
            //获取用户名的值并且修改
            if(e.target.classList.contains('a')&&e.target.closest('.main .center .username')){
                const a=e.target
                const originname=userdata.username
                const input1=document.createElement('input')
                input1.classList.add('b')
                input1.type='text'
                input1.value=originname    
                a.innerHTML=''
                a.appendChild(input1)
                input1.focus()
                input1.addEventListener('blur',function(){
                if(input1.value.trim()!==''){
                    a.innerHTML=input1.value
                    userdata.username=input1.value
                }else{
                    a.innerHTML=originname
                }
                input1.remove()
               })
            }
            //获取用户密码并且进行修改
            if(e.target.classList.contains('a1')&&e.target.closest('.main .center .password')){
                const a=e.target
                const originname=userdata.password
                const input1=document.createElement('input')
                input1.classList.add('b')
                input1.type='text'
                input1.value=originname    
                a.innerHTML=''
                a.appendChild(input1)
                input1.focus()
                input1.addEventListener('blur',function(){
                if(input1.value.trim()!==''){
                    a.innerHTML=input1.value
                    userdata.password=input1.value
                }else{
                    a.innerHTML=originname
                }
                input1.remove()
               })
            }
            //获取用户邮箱并修改
            if(e.target.classList.contains('a2')&&e.target.closest('.main .center .email')){
                const a=e.target
                const originname=userdata.email
                const input1=document.createElement('input')
                input1.classList.add('b')
                input1.type='text'
                input1.value=originname    
                a.innerHTML=''
                a.appendChild(input1)
                input1.focus()
                input1.addEventListener('blur',function(){
                if(input1.value.trim()!==''){
                    a.innerHTML=input1.value
                    userdata.email=input1.value
                }else{
                    a.innerHTML=originname
                }
                input1.remove()
               })
            }
            //获取用户工作时间并修改(这里修改输入框类型为date类型)
            if(e.target.classList.contains('a3')&&e.target.closest('.main .center .startworkyear')){
                const a=e.target
                const originname=userdata.startWorkYear
                const input1=document.createElement('input')
                input1.classList.add('b')
                input1.type='date'
                input1.value=originname    
                a.innerHTML=''
                a.appendChild(input1)
                input1.focus()
                input1.addEventListener('blur',function(){
                if(input1.value.trim()!==''){
                    a.innerHTML=input1.value
                    userdata.startWorkYear=input1.value
                }else{
                    a.innerHTML=originname
                }
                input1.remove()
               })
            }
            //获取用户职业并修改
            if(e.target.classList.contains('a4')&&e.target.closest('.main .center .profession')){
                const a=e.target
                const originname=userdata.profession
                const input1=document.createElement('input')
                input1.classList.add('b')
                input1.type='text'
                input1.value=originname    
                a.innerHTML=''
                a.appendChild(input1)
                input1.focus()
                input1.addEventListener('blur',function(){
                if(input1.value.trim()!==''){
                    a.innerHTML=input1.value
                    userdata.profession=input1.value
                }else{
                    a.innerHTML=originname
                }
                input1.remove()
               })
            }
            //获取用户公司并修改
            if(e.target.classList.contains('a5')&&e.target.closest('.main .center .company')){
                const a=e.target
                const originname=userdata.company
                const input1=document.createElement('input')
                input1.classList.add('b')
                input1.type='text'
                input1.value=originname    
                a.innerHTML=''
                a.appendChild(input1)
                input1.focus()
                input1.addEventListener('blur',function(){
                if(input1.value.trim()!==''){
                    a.innerHTML=input1.value
                    userdata.company=input1.value
                }else{
                    a.innerHTML=originname
                }
                input1.remove()
               })
            }
            //获取用户方向并修改
            if(e.target.classList.contains('a6')&&e.target.closest('.main .center .position')){
                const a=e.target
                const originname=userdata.position
                const input1=document.createElement('input')
                input1.classList.add('b')
                input1.type='text'
                input1.value=originname    
                a.innerHTML=''
                a.appendChild(input1)
                input1.focus()
                input1.addEventListener('blur',function(){
                if(input1.value.trim()!==''){
                    a.innerHTML=input1.value
                    userdata.position=input1.value
                }else{
                    a.innerHTML=originname
                }
                input1.remove()
               })
            }
            //获取用户个人介绍并修改
            if(e.target.classList.contains('a7')&&e.target.closest('.main .center .introduction')){
                const a=e.target
                const originname=userdata.introduction
                const input1=document.createElement('input')
                input1.classList.add('b')
                input1.type='text'
                input1.value=originname    
                a.innerHTML=''
                a.appendChild(input1)
                input1.focus()
                input1.addEventListener('blur',function(){
                if(input1.value.trim()!==''){
                    a.innerHTML=input1.value
                    userdata.introduction=input1.value
                }else{
                    a.innerHTML=originname
                }
                input1.remove()
               })
            }

            //获取个人头像的字符串并且修改(服务器问题，只能上传网址，还是要jpg格式才行,无敌了)
            if(e.target.classList.contains('submitavatar')&&e.target.closest('.main .right')){
                // const fileInput=document.createElement('input')
                // fileInput.type='file'//输入框格式为文件上传类型
                // fileInput.accept='image/*'//接受图片类型
                // fileInput.style.display='none'//隐藏输入框
                // right.appendChild(fileInput)
                // fileInput.addEventListener('change',function(e1){
                //     const file=e1.target.files[0]
                //     if(file){
                //         const reader=new FileReader()
                //         reader.onload=function(event){
                //             //更新图片src(只能用输入浏览器网址来做)
                //             document.getElementById('avatar').src=event.target.result
                //             const binaryString=event.target.result
                //             userdata.avatar=binaryString
                //         }
                //         reader.readAsDataURL(file)
                //     }
                //     fileInput.remove()
                // })
                // fileInput.click()
                const fileInput=document.createElement('input')
                fileInput.type='text'
                fileInput.value=""
                right.appendChild(fileInput)
                fileInput.focus()
                fileInput.addEventListener('blur',function(){
                    if(fileInput.value.trim()!==''){
                        const currentInput=fileInput.value
                        console.log("当前输入的网址为:",currentInput)
                        userdata.avatar=fileInput.value
                        const avatar=document.getElementById('avatar')
                        const avatar2=document.getElementById('avatar2')
                        avatar.src=userdata.avatar
                        avatar2.src=userdata.avatar
                    }
                    fileInput.remove()
                })
                console.log("上传图片后的用户数据为:",userdata)
            }

            //这里是提交修改个人数据的(已完成)
            if(e.target.classList.contains('change')&&e.target.closest('.main .center')){
                console.log("这是提交时的userdata:",userdata)
                let xhr=new XMLHttpRequest()
                xhr.open(
                    'POST',
                    'http://43.136.111.27:8086/user/refresh/info'
                )
                xhr.setRequestHeader('Authorization',`${userkey}`)
                xhr.setRequestHeader('Content-Type','application/json')
                xhr.send(JSON.stringify(userdata))
                console.log("这是json后的userdata",JSON.stringify(userdata))
                xhr.onreadystatechange=function(){
                    if(xhr.status===200&&xhr.readyState===4){
                        let response=JSON.parse(xhr.responseText)
                        console.log(response)
                        let name=userdata.username
                        if(name.length>4)
                        name=name.substring(0,4)+"..."
                        person.innerHTML=`
                            <img src="${userdata.avatar}" alt="" id="avatar2">
                            <span class="hello">${name}</span>
                            <button class="personalCenter">个人中心</button>
                            <button class="exit">退出登录</button>
                        `
                    }
                }
            }
            //点击个人主页渲染值
            if(e.target.classList.contains('personpage')&&e.target.closest('.main .left')){
                center.innerHTML=`
                <h1>个人中心</h1>
                <div class="username">
                    <span>用户名:</span>
                    <div class="a">${userdata.username}</div>
                </div>
                <div class="password">
                    <span>密码:</span>
                    <div class="a1">${userdata.password}</div>
                </div>
                <div class="email">
                    <span>邮箱:</span>
                    <div class="a2">${userdata.email}</div>
                </div>
                <div class="startworkyear">
                    <span>开始工作:</span>
                    <div class="a3">${userdata.startWorkYear}</div>
                </div>
                <div class="profession">
                    <span>职业:</span>
                    <div class="a4">${userdata.profession}</div>
                </div>
                <div class="company">
                    <span>公司:</span>
                    <div class="a5">${userdata.company}</div>
                </div>
                <div class="position">
                    <span>方向:</span>
                    <div class="a6">${userdata.position}</div>
                </div>
                <div class="introduction">
                    <span>个人介绍:</span>
                    <div class="a7">${userdata.introduction}</div>
                </div>
                <button class="change">保存更改</button>
                `
                right.innerHTML=`
                    <img src="${userdata.avatar}" alt="" id="avatar">
                    <button class="submitavatar">上传头像</button>
                `
                left.innerHTML=`
                    <div class="system">系统通知</div>
                    <div class="personpage">个人主页</div>
                    <div class="comment">评论列表</div>
                    <div class="good">赞/收藏列表</div>
                `
            }
            //点击系统中心(渲染系统通知数据)(要对data用循环渲染)
            if(e.target.classList.contains('system')&&e.target.closest('.main .left')){
                let xhr=new XMLHttpRequest()
                xhr.open(
                    'GET',
                    'http://43.136.111.27:8086/user/notifications'
                )
                xhr.setRequestHeader('Authorization', `${userkey}`)
                xhr.send()
                xhr.onreadystatechange=function(){
                    if(xhr.status===200&&xhr.readyState===4){
                        let response=JSON.parse(xhr.responseText)
                        console.log(response.data)
                        let data=response.data
                        if(data.length==0){
                            center.innerHTML=`
                                当前系统通知为空
                            `
                        }
                    }  
                }
            }
        
            //渲染点赞信息和收藏信息
            //渲染评论信息
        })


        //获取点击创作者中心的事件
    })
   
    
})
</script>


<!--控制字体大小-->
<script>
    const width=window.innerWidth
    console.log(width)
    const rem=width/100
    document.documentElement.style.fontSize=rem+'px'
    console.log(document.documentElement.style.fontSize)
</script>
